<!--
 * 档案字段模板 表单组件
 * :
 * @version: 1.0
 * @author: lakeside hubin_yuan.410@hotmail.com
 * @date: 20120-07-14
 * @LastEditors:
 * @LastEditTime:
 -->
<template>
  <el-form ref="fieldTmplForm" :disabled="!form.editable" :model="form.entry" :rules="form.editable?rules:{}"
           label-position="right"
           label-width="6rem">
    <el-tabs :value="'baseInfo'">
      <el-tab-pane label="基本信息" name="baseInfo">
        <el-row>
          <el-col :lg="8" :md="12">
            <el-form-item label="字段标题" prop="fieldLabel">
              <el-input v-model="form.entry.fieldLabel" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="表列名" prop="tableColumn">
              <el-input v-model="form.entry.tableColumn" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="实体属性名" prop="entityProperty">
              <el-input v-model="form.entry.entityProperty" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="12">
            <el-form-item label="表单类型" prop="formType">
              <dict-option-select v-model="form.entry.formType" :dictField="this.$constants.formDict.formType.key" :disabled="!form.editable"
                                  :readonly="!form.editable"
                                  autocomplete="off" placeholder=""></dict-option-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="数据类型" prop="dataType">
              <dict-option-select v-model="form.entry.dataType" :dictField="this.$constants.formDict.dataType.key" :disabled="!form.editable"
                                  :readonly="!form.editable"
                                  autocomplete="off" placeholder=""></dict-option-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="默认值" prop="defaultValue">
              <el-input v-model="form.entry.defaultValue" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="form.entry.formType=='date'" :lg="8" :md="12">
            <el-form-item label="时间格式" prop="datePattern">
              <dict-option-select v-model="form.entry.datePattern" :dictField="this.$constants.formDict.datePattern.key" :disabled="!form.editable"
                                  :readonly="!form.editable"
                                  autocomplete="off" placeholder=""></dict-option-select>
            </el-form-item>
          </el-col>

          <el-col v-if="form.entry.formType=='date'" :lg="8" :md="12">
            <el-form-item label="时间视图" prop="dateView">
              <dict-option-select v-model="form.entry.dateView" :dictField="this.$constants.formDict.dateView.key" :disabled="!form.editable"
                                  :readonly="!form.editable"
                                  autocomplete="off" placeholder=""></dict-option-select>
            </el-form-item>
          </el-col>
          <el-col v-if="form.entry.formType=='select'" :lg="8" :md="12">
            <el-form-item label="选项字典" prop="optionDict">
              <dict-tree-select v-model="form.entry.optionDict" :disabled="!form.editable"
                                :readonly="!form.editable"></dict-tree-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        </el-row>

        <el-row v-if="false">
          <el-col :lg="12" :md="24">
            <el-form-item label="字段模型" prop="fieldModel">
              <el-input v-model="form.entry.fieldModel" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="12" :md="24">
            <el-form-item label="字段提示" prop="fieldTip">
              <el-input v-model="form.entry.fieldTip" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :lg="8" :md="12">
            <el-form-item label="表单列序" prop="formCol">
              <el-input-number v-model="form.entry.formCol" :controls="false" :disabled="!form.editable"
                               :readonly="!form.editable"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="表单行序" prop="formRow">
              <el-input-number v-model="form.entry.formRow" :controls="false" :disabled="!form.editable"
                               :readonly="!form.editable"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="12">
            <el-form-item label="表单宽度" prop="formWidth">
              <el-input-number v-model="form.entry.formWidth" :controls="false" :disabled="!form.editable"
                               :readonly="!form.editable"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :lg="6" :md="12">
            <el-form-item label="是否标准字段" prop="hasBasic">
              <el-switch v-model="form.entry.hasBasic" :readonly="!form.editable"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="是否固定" prop="hasFixed">
              <el-switch v-model="form.entry.hasFixed" :readonly="!form.editable"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :lg="6" :md="12">
            <el-form-item label="是否内部配置" prop="hasInside">
              <el-switch v-model="form.entry.hasInside" :readonly="!form.editable"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="是否多选" prop="hasMultiple">
              <el-switch v-model="form.entry.hasMultiple" :readonly="!form.editable"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <!--<el-col :md="24" :lg="12">
              <el-form-item label="结构选项" prop="optionStruct">
                  <el-input v-model="form.entry.optionStruct" :readonly="!form.editable" :disabled="!form.editable"
                            placeholder="" autocomplete="off"></el-input>
              </el-form-item>
          </el-col>-->
        </el-row>
        <el-row>
          <el-col :lg="8" :md="12">
            <el-form-item label="上级主键" prop="parentId">
              <el-input v-model="form.entry.parentId" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="显示场景" prop="visibleScene">
              <dict-option-select v-model="form.entry.visibleScene" :dictField="this.$constants.formDict.visibleScene.key" :disabled="!form.editable" :readonly="!form.editable"
                                  autocomplete="off"
                                  clearable
                                  multiple placeholder=""></dict-option-select>

            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="门类主键" prop="categoryId">
              <el-input v-model="form.entry.categoryId" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :lg="12" :md="24">
            <el-form-item label="创建者" prop="createdByName">
              <el-input v-model="form.entry.createdByName" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="24">
            <el-form-item label="创建时间" prop="createdDate">
              <el-date-picker v-model="form.entry.createdDate" :disabled="!form.editable" :readonly="!form.editable" align="l"
                              format="yyyy-MM-dd HH:mm:ss"
                              placeholder="" type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="24">
            <el-form-item label="最后修改者" prop="modifiedByName">
              <el-input v-model="form.entry.modifiedByName" :disabled="!form.editable" :readonly="!form.editable" autocomplete="off"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="24">
            <el-form-item label="最后修改时间" prop="modifiedDate">
              <el-date-picker v-model="form.entry.modifiedDate" :disabled="!form.editable" :readonly="!form.editable" align="l"
                              format="yyyy-MM-dd HH:mm:ss"
                              placeholder="" type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="24" :md="24">
            <el-form-item label="备注描述" prop="remarkNote">
              <el-input v-model="form.entry.remarkNote" :autosize="{minRows: 2}" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off"
                        placeholder="" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="24">
            <el-form-item label="排序" prop="sortNum">
              <el-input-number v-model="form.entry.sortNum" :disabled="!form.editable" :readonly="!form.editable" autocomplete="off"
                               placeholder=""></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12">
            <el-form-item label="有效状态" prop="validStatus">
              <dict-option-select v-model="form.entry.validStatus" :dictField="this.$constants.coreDict.validStatus.key" :disabled="!form.editable"
                                  :readonly="!form.editable"
                                  autocomplete="off" placeholder=""></dict-option-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="属性规则" name="attributeRules">
        <el-row>
          <el-col :lg="8" :md="12">
            <el-form-item label="属性规则" prop="attributeRules">
              <el-input v-model="form.entry.attributeRules" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="校验规则" name="verifyRules">
        <el-row>
          <el-col :lg="8" :md="12">
            <el-form-item label="校验规则" prop="verifyRules">
              <el-input v-model="form.entry.verifyRules" :disabled="!form.editable" :readonly="!form.editable"
                        autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </el-form>
</template>

<script>
import DictOptionSelect from "@/views/system/components/DictOptionSelect";
import DictTreeSelect from "@views/system/components/DictTreeSelect";

export default {
  name: "dossierFieldTmplForm",
  model: {
    prop: 'form',
  },
  props: {
    form: {type: Object},
  },
  components: {DictTreeSelect, DictOptionSelect},
  data() {
    return {
      rules: {
        dataType: [
          {max: 20, message: '数据类型最大长度为20', trigger: ['blur', 'change']},
        ],
        datePattern: [
          {max: 20, message: '时间格式最大长度为20', trigger: ['blur', 'change']},
        ],
        dateView: [
          {max: 20, message: '时间视图最大长度为20', trigger: ['blur', 'change']},
        ],
        defaultValue: [
          {max: 50, message: '默认值最大长度为50', trigger: ['blur', 'change']},
        ],
        attributeRules: [
          {max: 65535, message: '属性规则最大长度为65535', trigger: ['blur', 'change']},
        ],
        fieldLabel: [
          {max: 20, message: '字段标题最大长度为20', trigger: ['blur', 'change']},
        ],
        fieldModel: [
          {max: 20, message: '字段模型最大长度为20', trigger: ['blur', 'change']},
        ],
        fieldName: [
          {max: 20, message: '字段名称最大长度为20', trigger: ['blur', 'change']},
        ],
        fieldTip: [
          {max: 200, message: '字段提示最大长度为200', trigger: ['blur', 'change']},
        ],
        verifyRules: [
          {max: 65535, message: '校验规则最大长度为65535', trigger: ['blur', 'change']},
        ],
        formCol: [
          {type: 'integer', message: '表单列序必须为数字整数', trigger: ['blur', 'change']},
        ],
        formWidth: [
          {type: 'integer', message: '表单宽度必须为数字整数', trigger: ['blur', 'change']},
        ],
        formRow: [
          {type: 'integer', message: '表单行序必须为数字整数', trigger: ['blur', 'change']},
        ],
        formType: [
          {max: 20, message: '输入类型最大长度为20', trigger: ['blur', 'change']},
        ],
        hasBasic: [],
        hasFixed: [],
        hasInside: [],
        hasMultiple: [],
        optionDict: [
          {max: 36, message: '选项字典主键最大长度为36', trigger: ['blur', 'change']},
        ],
        optionStruct: [
          {max: 20, message: '结构选项最大长度为20', trigger: ['blur', 'change']},
        ],
        parentId: [
          {max: 36, message: '上级主键最大长度为36', trigger: ['blur', 'change']},
        ],
        /*visibleScene: [
          {max: 65535, message: '显示场景最大长度为65535', trigger: ['blur', 'change']},
        ],
        categoryId:[
            {required: true,message: '门类主键不能为空',trigger: ['blur', 'change']},
            {max: 20,message: '门类主键最大长度为20',trigger: ['blur', 'change']},
        ],*/
      }
    }
  },
  methods: {
    /**表单校验回调*/
    async validate(callback) {
      return await this.$refs.fieldTmplForm.validate(callback)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
